<template>
    <!-- <el-tree
    :data="data"
    node-key="id"
    default-expand-all
    @node-drag-start="handleDragStart"
    @node-drag-enter="handleDragEnter"
    @node-drag-leave="handleDragLeave"
    @node-drag-over="handleDragOver"
    @node-drag-end="handleDragEnd"
    @node-drop="handleDrop"
     draggable
    :allow-drop="allowDrop"
    :allow-drag="allowDrag"> 
    </el-tree> -->
      <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />

    <el-tree
      ref="subjectTree"
      :data="data"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />

  </div>
</template>
<script>
import subject from '@/api/subject'
  export default {
    data() {
      return {
        filterText: '',
        data: [],//返回的所有数据分类
        defaultProps: {
          children: 'children',
          label: 'title'
        }
      };
    },
    watch: {//监听搜索栏
      filterText(val) {
      this.$refs.subjectTree.filter(val)
      }
    },//渲染页面前获取数据
    created(){
      this.getAllSubjectList()
    },
    methods: {//调用后台,获取数据库数据
      getAllSubjectList(){
        subject.getSubjectList()
          .then(response=>{
            this.data=response.data.list
          })
      },//判断搜索栏内容是否有数据可以匹配
       filterNode(value,data){
        if(!value) return true
        return data.title.toLowerCase().indexOf(value.toLowerCase())!==-1
      },
      // handleDragStart(node, ev) {
      //   console.log('drag start', node);
      // },
      // handleDragEnter(draggingNode, dropNode, ev) {
      //   console.log('tree drag enter: ', dropNode.label);
      // },
      // handleDragLeave(draggingNode, dropNode, ev) {
      //   console.log('tree drag leave: ', dropNode.label);
      // },
      // handleDragOver(draggingNode, dropNode, ev) {
      //   console.log('tree drag over: ', dropNode.label);
      // },
      // handleDragEnd(draggingNode, dropNode, dropType, ev) {
      //   console.log('tree drag end: ', dropNode && dropNode.label, dropType);
      // },
      // handleDrop(draggingNode, dropNode, dropType, ev) {
      //   console.log('tree drop: ', dropNode.label, dropType);
      // },
      // allowDrop(draggingNode, dropNode, type) {
      //   if (dropNode.data.title === '二级 3-1') {
      //     return type !== 'inner';
      //   } else {
      //     return true;
      //   }
      // },
      // allowDrag(draggingNode) {
      //   return draggingNode.data.title.indexOf('三级 3-2-2') === -1;
      // },
    }
  };
</script>
